<template>
  <div class="mMenu">
    <Menu theme="light" width="auto" >
      <div v-for="menu in menus" :key="menu.name">
        <!-- 顶级菜单 -->
        <router-link  v-if="!menu.children" :to="menu.link">
          <MenuItem :name="menu.name">
            <Icon size="16" :type="menu.icon"></Icon>
            {{ menu.name }}
          </MenuItem>
        </router-link>
        <!-- 二级菜单 -->
        <Submenu v-if="menu.children" :name="menu.name">
          <template slot="title">
            <Icon size="16" :type="menu.icon"></Icon>
            {{ menu.name }}
          </template>
          <router-link v-for="child in menu.children" :to="child.link" :key="menu.name + child.name">
            <MenuItem :name="menu.name + child.name">
              <Icon size="16" v-if="child.icon" :type="child.icon"></Icon>
              {{ child.name }}
            </MenuItem>
          </router-link>
        </Submenu>
      </div>
    </Menu>
  </div>
</template>

<script>
import {CONFIG_MENUS} from '../config/menu';

export default {
	name: 'mMenu',
	data () {
		return {
			menus: CONFIG_MENUS
		}
	}
}
</script>

<style scoped>
  a {
    color: black;
  }
</style>